<div class="widget">
	<div class="widget-header bg-blue">
		<i class="widget-icon icon-notebook"></i> 
		<span class="widget-caption"> 新增门店 </span>
		<div class="widget-buttons">
			<a href="javascript:void(0);" onclick="handlerCancel(this);" title="关闭"
				 data-toggle="dispose" data-refresh-table="#table-shops"> <i class="fa fa-times"></i> </a> 
		</div>
	</div>
	<div class="widget-body">
		<!-- TODO 基本信息 -->
		<div class="widget radius-bordered">
			<div class="widget-header">
				<i class="widget-icon icon-notebook"></i> 
				<span class="widget-caption"> 基本信息 </span>
			</div>
			<div class="widget-body editor-body-sm">
				<form class="form-horizontal form-editor form-editor-shops">
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label required" for="name">名称</label>
								<div class="col-sm-8">
									<input name="name" id="name" type="text" class="form-control" required="required">
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label required" for="regionid">校区</label>
								<div class="col-sm-8">
									<select name="regionid" id="regionid" class="chosen-select" 
													data-entity="com.app.miwawa.api.system.entity.Region">
									</select>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label" for="code">编码</label>
								<div class="col-sm-8">
									<input name="code" id="code" type="text" class="form-control" readonly="readonly">
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label" for="createDate">创办时间</label>
								<div class="col-sm-8">
									<div class="input-group date date-selector">
										<input name="createDate" id="createDate" type="text" class="form-control"> 
										<span class="input-group-addon">
											<span class="fa fa-calendar"></span>
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label" for="keeper">店长</label>
								<div class="col-sm-8">
									<input type="text" name="keeper" id="keeper" class="form-control" />
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label" for="mobile">手机</label>
								<div class="col-sm-8">
									<input name="mobile" id="mobile" type="text" class="form-control"> 
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label" for="address">地址</label>
								<div class="col-sm-8">
									<input type="text" name="address" id="address" class="form-control" />
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label" for="zipcode">邮编</label>
								<div class="col-sm-8">
									<input type="text" name="zipcode" id="zipcode" class="form-control"/>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label class="col-sm-4 control-label" for="telehone">电话</label>
								<div class="col-sm-8">
									<input type="text" name="telehone" id="telehone" class="form-control"/>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-12">
							<div class="widget">
								<div class="widget-header bordered-top bordered-pink">
									<span class="widget-caption"> 机构介绍 </span>
								</div>
								<div class="widget-body">
									<textarea id="description" name="description" class="form-control"></textarea>
								</div>
							</div>
						</div>
					</div>
					
					<div class="widget-footer editor-footer-sm">
						<button type="button" class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="取消" onclick="handlerCancel(this);" data-refresh-table="#table-shops">
							<i class="glyphicon glyphicon-remove"></i>
						</button>
						<button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="top" title="保存" onclick="handlerSubmit(this, '#editor-form-shops', '.form-editor-shops');" data-submit-callback="handlerCallback">
							<i class="glyphicon glyphicon-ok"></i>
						</button>
					</div>
				</form>
			</div>
		</div>
		
		<!-- TODO 机构相册 -->
		<div class="widget radius-bordered collapsed hidden" id="editor-panel-photos">
			<div class="widget-header bordered-top bordered-pink">
				<i class="widget-icon ion-images"></i>
				<span class="widget-caption"> <a href="" data-toggle="collapse"> 机构相册 </a> </span>
				<div class="widget-buttons compact">
					<a href="" data-toggle="collapse"> <i class="fa fa-compress"></i> </a> 
				</div>
			</div>
			<div class="widget-body">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget radius-bordered">
							<div class="widget-header">
								<div class="widget-buttons buttons-bordered">
									<button class="btn btn-default btn-sm" title="删除" data-toggle="tooltip" data-placement="top" onclick="handlerDelete()">
										<i class="fa fa-trash"></i>
									</button>
								</div>
							</div>
							<div class="widget-body widget-photos">
								<select class="image-picker" multiple="multiple" data-url="/miwawa/{dbname}/file/find.json">
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<input id="upload" name="file" type="file" class="file-loading" accept="image/*" multiple>
					</div>
				</div>
			</div>
		</div>
		
		<!-- TODO 部门信息 -->
		<div class="widget radius-bordered hidden" id="editor-panel-depts">
			<div class="widget-header">
				<i class="widget-icon icon-notebook"></i>
				<span class="widget-caption"> <a href="" data-toggle="collapse"> 部门信息 </a> </span>
				<div class="widget-buttons buttons-bordered">
					<button class="btn btn-default btn-sm" title="添加" data-toggle="tooltip" data-placement="top" onclick="handlerAddRow('#table-depts')">
						<i class="fa fa-plus"></i>
					</button>
				</div>
				<div class="widget-buttons compact">
					<a href="" data-toggle="collapse"> <i class="fa fa-compress"></i> </a> 
				</div>
			</div>
			<div class="widget-body editor-body-sm">
				<form class="table-editor table-editor-depts">
					<table data-ajax="handlerSearch" 
								 data-method="post"
								 data-id-field="id" 
								 data-unique-id="id" 
								 data-pagination="true"  
								 data-check-on-init="true" 
								 data-side-pagination="server" 
								 data-mobile-responsive="true"
								 data-form-source=".table-editor-depts"
								 data-form-target="#editor-form-depts"
								 data-form-search="#search-form-depts" id="table-depts">
						<thead>
							<tr>
								<th data-checkbox="true"></th>
								<th data-field="id" 			data-visible="false"></th>
								<th data-field="name" 		data-align="center">部门名称</th>
								<th data-field="manager" 	data-align="center">负责人</th>
								<th data-field="mobile" 	data-align="center">手机</th>
								<th data-field="operator" data-align="center" data-width="65" data-formatter="renderOperator" data-table-target="depts">操作</th>
							</tr>
						</thead>
					</table>
				</form>
			</div>			
		</div>
	</div>
</div>

<!-- 提交表单 ========================================================= -->
<form id="editor-form-shops" action="/miwawa/default/shops/save" method="post" 
			name="com.app.miwawa.api.system.entity.center.Shops" 
			data-show-target='["#editor-panel-photos","#editor-panel-depts"]' data-custom-action="true">
			<input type="hidden" name="status" value="0">
			<input type="hidden" name="invalid" value="F">
			<input type="hidden" name="centerid" value="0">
</form>
<form id="editor-form-depts" action="/miwawa/default/common/save" method="post" 
			name="com.app.miwawa.api.system.entity.center.Depts" 
			data-foreign-src="#editor-form-shops" 
			data-foreign-key="com.app.miwawa.api.system.entity.center.Shops">
			<input type="hidden" name="bean['type']" value="shops">
			<input type="hidden" name="bean['status']" value="0">
			<input type="hidden" name="bean['invalid']" value="F">
			<input type="hidden" name="bean['shopsid']" value="0" data-foreign-id>
			<input type="hidden" name="bean['centerid']" value="0" id="centerid">
			<input type="hidden" name="bean['createDate']" value="0" id="createDate">
</form>
<!-- 查询表单 ========================================================= -->
<form id="search-form-depts" action="/miwawa/default/common/search.json" method="post" 
			name="com.app.miwawa.api.system.entity.center.Depts">
			<input type="hidden" name="status" value="0" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="invalid" value="F" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="shopsid" value="0" data-search-group="and" data-search-operation="EQ" data-foreign-id>
			<input type="hidden" data-search-sort="createDate" data-search-order="desc">
</form>

<!-- 删除表单 ========================================================= -->
<form id="remove-form-depts" action="/miwawa/default/common/remove" method="post" name="com.app.miwawa.api.system.entity.center.Depts"></form>
    
<script type="text/javascript">
<!--
	jQuery(function() {
		jQuery(":hidden[name='centerid']",'#editor-form-shops').val(centerid);
		jQuery("#centerid",'#editor-form-depts').val(centerid);
		
		require(['moment','jquery.plugin.form'],function(moment, form){
			jQuery("#createDate",'#editor-form-depts').val(moment().format('YYYY-MM-DD'));
			
			form.tooltip("[data-toggle='tooltip']");
			form.datepicker('.date-selector');

			form.chosen("#regionid").select("#regionid",{ 
				url:"/miwawa/default/common/select.json",
				querys:{"centerid_EQ":centerid} 
			});
			
			// 注册富文本编辑器控件
			form.summernote("#description",{
				callbacks: {
			    onImageUpload: function(files) {
			    	uploadFile(files[0]);
			    }
			  }
			});
			
			jQuery("#table-depts").bootstrapTable();
		});
	});
	
	// 保存基本信息后回调
	function handlerCallback(){
		require(['jquery.plugin.form'],function(form){
			// 注册文件上传控件
			form.fileinput("#upload", { 
				uploadUrl:"/miwawa/{dbname}/file/upload".replace("{dbname}",dbname),
				uploadExtraData: {
					"recordId": jQuery("#editor-form-shops").data("com.app.miwawa.api.system.entity.center.Shops"),
					"group": "shops",
					"mode": "file",
					"type": "image"
				},
				allowedFileExtensions: ["jpg", "png", "gif"],
				onUploadSuccess:function(event, data, previewId, index){
					event.preventDefault;
					loaderFile();
					jQuery("#upload").fileinput('reset');
				}
			});
		});
	}
	
	//文件删除
	function handlerDelete(){
		var photos = jQuery(".image-picker").data('picker').selected_values();
		if(photos.length <= 0){
			jQuery.message.warning("请选择要删除的图片！");
		}else{
			jQuery.ajaxsend({
				url:"/miwawa/{dbname}/file/delete".replace("{dbname}",dbname),
				data:{ids:photos.join(",")},
				success:function(data){
					if(data && data.success) loaderFile();
				}
			});
		}
	}
	
	// 加载文件
	function loaderFile(){
		require(['jquery.plugin.form'],function(form){
			form.imagepicker(".image-picker",{
				url:"/miwawa/{dbname}/file/find.json".replace("{dbname}",dbname),
				data:{"recordId": jQuery("#editor-form-shops").data("com.app.miwawa.api.system.entity.center.Shops")}
			});
		});
	}
	
	// 上传文件
	function uploadFile(file){
		var data = new FormData();
	      data.append("file", file);
	      data.append("type", "image");
	      data.append("mode", "file");
	      data.append("group", "shops");
	      data.append("notsaved", true);
	      
	  jQuery.ajaxsend({
		  url: "/miwawa/{dbname}/file/upload".replace("{dbname}", dbname),
		  data: data,
		  contentType: false,
	    processData: false,
		  success: function(file){
	    	jQuery("#description").summernote('insertImage', file.url);
		  }
	  });
	}

	/* ===================================== */
	/* 表格 行编辑 开始 */
	/* ===================================== */
	// 添加行编辑
	function handlerAddRow(target){
		var $table = jQuery(target);
		
		if(!hasEditorRow()){
			var rowdata = {
				"table-depts":{
					id: 'new',
					name: 		createInput('name', 		'text', 'ext-text'),
					manager: 	createInput('manager',	'text', 'ext-text'),
					mobile: 	createInput('mobile', 	'text', 'ext-text'),
	        operator: createButton(target)
				}
			};
			
			$table.bootstrapTable('insertRow', { index: 0, row: rowdata[target.replace("#","")] });
		}
		
		// 创建输入框
		function createInput(name, type, ext, value){
			switch(type){
				case 'text': 
					var input = "";
					if(value != undefined){
						input = '<input name="'+name+'" type="'+type+'" class="form-control '+ext+'" value="'+value+'">';
					}else{
						input = '<input name="'+name+'" type="'+type+'" class="form-control '+ext+'">';
					}
				return input;
			}
		}
		
		// 创建按钮
		function createButton(target){
			return ""
						+"<span class='table-editor-tools'>"
						+"	<button class='btn btn-danger  btn-xs' onclick='handlerCancelRow(\""+target+"\");'><i class='icon ion-close-circled'></i></button>"
						+"	<button class='btn btn-success btn-xs' onclick='handlerSubmitRow(\""+target+"\");'><i class='icon ion-checkmark-circled'></i></button>"
						+"</span>";
		}
		
		// 判断是否有编辑行
		function hasEditorRow(){
			return $table.bootstrapTable('getRowByUniqueId', 'new') ? true : false;
		}
	}

//-->
</script>